<template>
  <view>
    <cu-custom bgColor="bgmain" :isBack="true">
      <view slot="content">历史订单</view>
    </cu-custom>
    <view class="container">
      <view class="modal" v-if="getUseInfo">
        <view class="m_box tc">
          <view class="title">提示</view>
          <view class="fs30 p20">请先开启用户授权</view>
          <view class="border_top_2">
            <button @getuserinfo="getUsetInfo" class="m_btn" openType="getUserInfo">确定</button>
          </view>
        </view>
      </view>
      <view class="page">
        <view class="tabBars row">
          <view class="tabBar" :class="{ cur: typeFlg == 0 }" @click="changeType(0)">外卖单
            <view class="numss" v-if="nums1 > 0">{{ nums1 }}</view>
          </view>
          <view class="tabBar" :class="{ cur: typeFlg == 1 }" @click="changeType(1)">跑腿单
            <view class="numss" v-if="nums2 > 0">{{ nums2 }}</view>

          </view>
        </view>
        <view class="page-container">
          <view class="grid flex-1 col-1 nodata" style="margin: 100rpx auto; text-align: center; width: 100%"
            v-if="list.length == 0">
            <view class="padding-sm">
              <view class="padding radius text-center light">
                <text class="cuIcon-infofill lg text-lg" style="font-size: 50rpx"></text>
                <view class="text-lg padding-tb-sm'">暂无数据</view>
                <!-- <text class="cuIcon-infofill lg text-lg text-main" style='font-size:50rpx'></text>
                                    <view class="text-main">暂无数据</view> -->
              </view>
            </view>
          </view>

          <view class="block margin-lr" style="width:690rpx;" v-if="list.length > 0">
            <!-- <view class="tower-swiper" @touchmove="TowerMove" @touchstart="TowerStart" @touchend="TowerEnd">
                            <view class="tower-item" :class="Kitem.zIndex == 1 ? 'none' : ''" v-for="(Kitem, Kindex) in swiperList" :key="Kindex" :style="[{ '--index': Kitem.zIndex, '--left': Kitem.mLeft }]" :data-direction="direction">
                                <view class="swiper-item bg-white" style="width:300rpx;height:300rpx;">
                                    {{Kindex}}
                                </view>
                            </view>
                        </view> -->
            <block v-for="(items, indexs) in list" :key="indexs">
              <view class="margin-top"></view>
              <view class="names row" @click="tagetFlg(indexs)" v-if="typeFlg == 0">{{ items.business_name }}
                <view class="row">
                  <view class="nums">{{ items.list.length }}</view>
                  <view class="cuIcon-right"></view>

                </view>
              </view>

              <!-- <swiper
                                :indicator-dots="list.length>1"
                                autoplay
                                circular
                                style="height:450rpx;"
                            > -->
              <block v-for="(item, index) in items.list" :key="index" v-if="openFlg == indexs || typeFlg == 1">
                <!-- {{  items.business_name }} -->
                <!-- <swiper-item> -->
                <view class="box bg-white padding align-center" @tap="detail" :data-index="index" :data-id="item.id">
                  <view class="flex align-center justify-between">
                    <view class="text-lg text-bold text-black">{{ item._type_txt }}
                      {{ item.type == 3 ? "-" : "" }}
                      {{ item.type != 4 ?
                        (item.type == 3 ? (items.business_name || "") : "") : "" }}</view>
                    <view style="display:flex;">
                      <view class="status_btn addjia" v-if="item.is_plus == 1">有加价</view>
                      <view class="status_btn" style="flex-shrink: 0;">{{ item._status_txt }}</view>
                    </view>

                  </view>
                  <view class="time">{{ item.create_time }}</view>
                  <view class="flex addr_box align-center">
                    <view class="" style="width: 80%;">
                      <view class="flex align-center">
                        <view class="blue circle"></view>
                        <view class="addr margin-left" v-if="item.type == 3">{{ items.business_address
                        }}</view>
                        <view class="addr margin-left" v-else>{{ item.type != 4 ? item.qu_addres :
                          item.remarks }}</view>
                      </view>
                      <text class="cuIcon-moreandroid" v-if="item.type != 4 || item.sh_addres != ''"></text>
                      <view class="flex align-center" v-if="item.type != 4 || item.sh_addres != ''">
                        <view class="orange circle"></view>
                        <view class="addr margin-left">{{ item.sh_addres }}</view>
                      </view>
                    </view>
                    <view class="text-lg text-red text-bold">￥{{ item.total }}</view>
                  </view>
                  <view class="flex margin-top operate_box">
                    <view class="operate active" @click.stop="handleQd" :data-id="item.id">抢单</view>
                  </view>
                </view>

                <!-- </swiper-item> -->

              </block>
              <!-- </swiper> -->

            </block>


          </view>
        </view>
      </view>
      <view class="cu-tabbar-height"></view>
    </view>
    <!-- <grab-footer flg="历史接单" class="aaa"></grab-footer> -->

    <!-- <import src="/gc_school/pages/templates/footer.wxml" />
<template is="footerWx" data="{{...tabBar}}" /> -->
  </view>
</template>
<style>
.tower-swiper .tower-item {
  transform: scale(calc(0.5 + var(--index) / 10));
  margin-left: calc(var(--left) * 100upx - 50upx);
  z-index: var(--index);
  width: 500rpx;
  background-color: #fff;
  left: 30rpx;
}
</style>
<script>
var app = getApp();
export default {
  data() {
    return {
      TabCur: 0,
      scrollLeft: 0,
      page: 1,
      type: 8,
      list: [],
      hasMoreData: false,
      getUseInfo: '',
      swiperList: [
        {},
        {},
        {},
        {},
        {},
      ],
      direction: '',
      timeList: [

      ],
      flg: 0,
      typeFlg: 0,
      openFlg: 0,
      nums: 0,
      nums1: 0,
      nums2: 0


    };
  }
    /**
     * 生命周期函数--监听页面加载
     */,
  onLoad: function (options) {

    this.TowerSwiper('swiperList');
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    app.globalData.util.footer(this);

  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.list = []
    this.page = 1
    this.getData();

  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  // onPullDownRefresh() {
  //     // this.pullDown.start()
  //     // this.list = []
  //     // this.page = 1
  //     // this.getData();
  // },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    // if (this.hasMoreData) {
    //     this.getData();
    // } else {
    //     uni.showToast({
    //         title: '没有更多数据',
    //         icon: 'none'
    //     });
    // }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    tagetFlg(flg = 0) {
      this.openFlg = this.openFlg == flg ? -1 : flg
    },
    changTime(index) {
      this.flg = index
      this.getData()
    },
    changeType(index) {
      this.typeFlg = index
      this.getData()
    },
    // towerSwiper
    // 初始化towerSwiper
    TowerSwiper(name) {
      let list = this[name];
      for (let i = 0; i < list.length; i++) {
        list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
        list[i].mLeft = i - parseInt(list.length / 2)
      }
      this.swiperList = list
    },

    // towerSwiper触摸开始
    TowerStart(e) {
      this.towerStart = e.touches[0].pageX
    },

    // towerSwiper计算方向
    TowerMove(e) {
      this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
    },

    // towerSwiper计算滚动
    TowerEnd(e) {
      let direction = this.direction;
      let list = this.swiperList;
      if (direction == 'right') {
        let mLeft = list[0].mLeft;
        let zIndex = list[0].zIndex;
        for (let i = 1; i < this.swiperList.length; i++) {
          this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft
          this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex
        }
        this.swiperList[list.length - 1].mLeft = mLeft;
        this.swiperList[list.length - 1].zIndex = zIndex;
      } else {
        let mLeft = list[list.length - 1].mLeft;
        let zIndex = list[list.length - 1].zIndex;
        for (let i = this.swiperList.length - 1; i > 0; i--) {
          this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft
          this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex
        }
        this.swiperList[0].mLeft = mLeft;
        this.swiperList[0].zIndex = zIndex;
      }
      this.direction = ""
      this.swiperList = this.swiperList
    },




    //详情跳转
    detail(e) {
      console.log(e.currentTarget.dataset);
      uni.navigateTo({
        url: '/gc_school/pages/order/detail?id=' + e.currentTarget.dataset.id
      });
    },

    async getData() {

      let res = await this.request("orders/seize_orders", {
        s_id: uni.getStorageSync('schoolId'),
        type: this.typeFlg == 0 ? 3 : this.typeFlg
      })
      this.request("orders/seize_orders", {
        s_id: uni.getStorageSync('schoolId'),
        type: 3
      }).then(res => {
        this.nums1 = res.data?.token || 0
      })
      this.request("orders/seize_orders", {
        s_id: uni.getStorageSync('schoolId'),
        type: 1
      }).then(res => {
        this.nums2 = res.data?.token || 0
      })
      let timeList = res.data.data.map(item => {
        return {
          ...item
        }
      }).filter(item => item.time)
      this.timeList = [
        { time: "00:00-23:59", count: res.data.token }, ...timeList
      ]
      console.log(this.timeList);



      this.request("Orders/historyRunOrderLists", {
        s_id: uni.getStorageSync('schoolId'),
        seize_orders_time: this.timeList[this.flg]?.time,
        type: this.typeFlg == 0 ? 3 : this.typeFlg,
      }).then(res => {
        // this.nums=res.data.data.count
        if (this.typeFlg == 0) {
          this.list = res.data.data.list.map(item => {
            return {
              ...item,
              list: [
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                // ...item.list,
                ...item.list,
              ]
            }
          })

        } else {
          // this.list=[
          //     {
          //         list: res.data.data.list
          //     }
          // ]
          this.list = res.data.data.list.map(item => {
            return {
              list: [item]
            }
          })

        }
      })


      return
      const self = this;
      app.globalData.util.request({
        url: 'historyRunOrderLists',
        data: {
          s_id: uni.getStorageSync('schoolId'),
          page: this.page,
          limit: 10,
        },
        method: 'GET',
        success(res) {
          self.pullDown.end()
          if (res.data.data.list.length < 10) {
            if (res.data.data.list.length > 0) {
              for (var i = 0; i < res.data.data.list.length; i++) {
                var temp = res.data.data.list[i].remarks;
                res.data.data.list[i].remarks.replace(/[0-9]*(\.[0-9]*)?/g, function (e) {
                  var te = e;
                  if (Number(e)) {
                    if (e.toString().length > 3) {
                      var d = e.substr(0, 2) + '****' + e.substr(6);
                    } else {
                      var d = e.substr(0, 1) + '**';
                    }

                    temp = temp.replace(te, d);
                    console.log(temp);
                  }
                });
                res.data.data.list[i].remarks = temp;
              }

              self.setData({
                // list: self.list.concat(res.data.data.list),
                hasMoreData: false
              });
            }
          } else {
            for (var i = 0; i < res.data.data.list.length; i++) {
              var temp = res.data.data.list[i].remarks;
              res.data.data.list[i].remarks.replace(/[0-9]*(\.[0-9]*)?/g, function (e) {
                var te = e;

                if (Number(e)) {
                  if (e.toString().length > 3) {
                    var d = e.substr(0, 2) + '****' + e.substr(6);
                  } else {
                    var d = e.substr(0, 1) + '**';
                  }

                  temp = temp.replace(te, d);
                  console.log(temp);
                }
              });
              res.data.data.list[i].remarks = temp;
            }

            self.setData({
              list: self.list.concat(res.data.data.list),
              hasMoreData: true,
              page: self.page + 1
            });
          } // if (this.data.page == 1) {
          // 	self.setData({
          // 		list: res.data.data.order
          // 	})
          // } else {
          // 	for (var i = 0; i < res.data.data.list.length; i++) {
          // 		self.setData({
          // 			list: [
          // 				...self.data.list,
          // 				res.data.data.list[i]
          // 			]
          // 		})
          // 	}
          // }
        }
      }, true);
    },
    handleQd(e) {
      console.log(this.tips);
      this.tips.choose("成功抢单后，将不能主动取消订单，特殊原因需要取消请与发起人联系", "抢单确认").then(res => {
        if (res.code == 200) {
          console.log("抢单");
          this.handleQde(e)
        }
      })
    },
    //抢单
    async handleQde(e) {
      console.log(e.currentTarget.dataset.id)

      //  uni.navigateTo({
      //     url: '/gc_school/pages/mygrab/index'
      // });
      // return false

      await this.dingyueChat()
      // return;
      var that = this;
      //     uni.requestSubscribeMessage({
      //         tmplIds: [that.sysparment.template_id, that.sysparment.cancel_template_id],
      //         // 此处可填写多个模板 ID，但低版本微信不兼容只能授权一个
      //         success(res) {
      //             console.log('已授权接收订阅消息');
      //         },
      //         complete() {
      app.globalData.util.request({
        url: 'Orders/grab',
        data: {
          o_id: e.currentTarget.dataset.id,
        },
        success(res) {
          uni.showToast({
            title: '抢单成功',
            // icon: 'none',
            duration: 2000,
            success() {
              setTimeout(() => {
                this.list = []
                this.page = 1
                this.getData();

                // uni.navigateTo({
                //   url: '/gc_school/pages/mygrab/index?typeFlg' + that.typeFlg
                // });
              }, 2000)
            }
          });
        }
      }, true);
      // }
      // });
    },

    tabSelect(e) {
      this.setData({
        TabCur: e.currentTarget.dataset.id,
        scrollLeft: e.currentTarget.dataset.id * 60,
        type: e.currentTarget.dataset.index
      });
      this.setData({
        page: 1
      });
      this.getData();
    },

    getUsetInfo() {
      console.log('占位：函数 getUsetInfo 未声明');
    }
  }
};
</script>
<style lang="scss">
.page-container {
  display: flex;
}

page {
  background: #F7F5F6;
}

.content .ft {
  display: flex;
  margin-bottom: 5rpx;
}

#cuIcon-homefills {
  width: 48rpx !important;
  position: relative !important;
  display: block !important;
  height: 48rpx !important;
  margin: 0 auto 10rpx !important;
  text-align: center !important;
  font-size: 40rpx !important;
}

#cuIcon-homefillt {
  width: 72rpx !important;
  position: absolute !important;
  display: block !important;
  height: 72rpx !important;
  margin: 0 auto 10rpx !important;
  text-align: center !important;
  font-size: 40rpx !important;
  top: 0;
  left: 0;
}

.indedx {
  color: #010101;
  font-size: 22rpx;
  padding: 10rpx 0 10rpx 0;
}

.indedxs {
  color: #12a6ee;
  font-size: 22rpx;
  margin-top: 10rpx;
  padding: -1rpx 0 10rpx 0;
  box-sizing: border-box;
}

.indedxt {
  color: #010101;
  font-size: 22rpx;
  padding: 10rpx 0 10rpx 0;
}

.text-gray,
.line-gray,
.lines-gray {
  color: #e7e7e7 !important;
}

.text-white {
  color: #ff6344;
}

.box {
  /* box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1); */
  margin: 30rpx 0;
  border-radius: 10rpx;
  position: relative;
}

.cu-tags {
  color: #ff6444;
  background: #fbf6f2;
}

.addjia {
  background: #ff6444 !important;
  color: #fbf6f2 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  // width: 100rpx;
  // border-radius: 200rpx;
  margin-right: 20rpx;
}

.type_icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 10rpx;
}

.text-xl {
  color: #00bc6a;
  font-weight: bold;
}

.ft {
  margin-left: 50rpx;
}

.bg-del {
  /* background: white; */
  border: 1px solid #999999;
}

.margin-top-sm .cu-tag {
  padding: 20rpx;
}

.bg-yellows {
  border: 1px solid #ff6344;
  background: white;
  color: #ff6344;
}

.cu-btn {
  font-size: 26rpx;
}

.cu-btn:not([class*='bg-']) {
  background-color: white;
}

.text-cut {
  max-width: 400rpx;
}

.status_btn {
  background-color: #FEF5F5;
  color: #FF4C4D;
  font-size: 24rpx;
  width: 100rpx;
  text-align: center;
  padding: 10rpx 0;
  border-radius: 20rpx;
}

.time {
  color: #666666;
  font-size: 26rpx;
  margin-top: 10rpx;
}

.addr_box {
  background-color: #F9F9F9;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-top: 20rpx;
}

.addr {
  font-size: 30rpx;
  font-weight: bold;
}

.circle {
  border: 6rpx solid #3792F5;
  background-color: white;
  width: 22rpx;
  height: 22rpx;
  border-radius: 50%;
  flex-shrink: 0;
}

.bule {
  border: 6rpx solid #3792F5;
}

.orange {
  border: 6rpx solid #FB4119;
}

.cuIcon-moreandroid {
  margin-left: -5rpx;
  color: grey;
}

.operate_box {
  .operate:first-child {
    margin-left: auto;
  }
}

.operate {
  border: 1rpx solid #E5E5E5;
  padding: 10rpx 30rpx;
  border-radius: 28rpx;
  color: #323232;
  // margin-left: auto;
}

.active {
  background-color: #FF4C4D;
  border: none;
  color: white;
}

@import "./main.scss";
</style>
